/*
 * @Author: lduoduo
 * @Date: 2021-04-20 16:11:41
 * @Last Modified by: lduoduo
 * @Last Modified time: 2021-04-23 18:36:06
 * 表单选择
 */

import React, { useState, useRef } from 'react';
import { Table, Button } from 'antd';

import dataSource from './consts';

const FormSelect = (props) => {
  const { onChange: propsChange } = props;
  const refList = useRef();
  const [value, setValue] = useState(props.value || {});

  console.log('FormSelect', props);

  const onChange = (e) => {
    propsChange(e);
    setValue(e);
  };

  const columns = [
    { title: '表单名', dataIndex: 'name' },
    {
      title: '请选择',
      name: '',
      render(d, row = {}) {
        const { code, id, name } = row;

        if (value && value.name === id) return '已选择';
        return <Button onClick={() => onChange({ key: code, id, name })}>选择</Button>;
      },
    },
  ];

  return (
    <div>
      {value.name && <div>{`已选择：${value.name}`}</div>}
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default FormSelect;
